Many display descriptions, such as web page definitions, are specified using display description languages such as HTML, XML, or other markup language. These display description languages are declarative in the sense that they allow a programmer to specify the content of the display without specifying the procedure for rendering the content. For example, a display description language may allow a developer to specify that a table is to be displayed at a certain location and to specify the content of the cells within the table without having to specify the steps needed to render the table. A rendering engine is responsible for performing the rendering in accordance with the display description. For example, an HTML rendering engine inputs an HTML document that may define the content of a web page and renders the web page.
Although declarative display description languages are highly readable, they have some disadvantages over programs written in procedural languages specifically to render content in a certain layout. In particular, the declarative display descriptions often have a greater level of repetitiveness than procedural programs. For example, the content or attributes of the same user interface element (e.g., a table) may need to be repeated several times in a display description to accommodate different characteristics of the output device. This repetition increases the cost of both developing and maintaining the user interface and reduces readability.
Several techniques are commonly used to reduce repetition in declarative display descriptions. One such technique uses “styles” to define various attributes at a common location that can be applied to the content of various user interface elements of the display description. For example, a style may be defined that specifies that hyperlinks of a certain class are to be rendered in red. Another style may be defined that specifies that hyperlinks of another class are to be rendered in green. When a rendering engine encounters a hyperlink, it retrieves the style for the hyperlink's class and renders the hyperlink with the appropriate color. Styles may even allow the use of conditional logic. For example, a style may specify that a class of hyperlinks is to normally have the color red, but when a mouse pointer is hovering over that hyperlink, its color is to change to green. An alternative to the use of styles would be to have a color attribute and color attribute selection logic specified for each hyperlink element. Styles have an advantage over this alternative in that when a color or color logic for a class of hyperlinks is modified, only the style for that class needs to be modified, rather than each hyperlink element. Another advantage is that the display description is more readable when the individual user interface elements are not cluttered with attributes and logic.
These common techniques, however, do not provide a good way to vary the layout of content conditionally. For example, a window pane may need to have its layout varied depending on whether it is docked on the left or bottom of a display device. When the window pane is docked on the left, its content should be arranged vertically, and when the window pane is docked on the bottom, its content should be arranged horizontally. In addition, the layout of the user interface elements may be conditional upon the size and shape of the display device itself. For example, the layout of user interface elements of a web page to be rendered on a 17-inch display device would likely be very different from that of a 3-inch display device. When specified using a declarative display description language, these conditional layouts are typically generated statically or dynamically. A statically generated display description is generated once and contains multiple copies of the content and the attributes of a user interface element for each possible layout of that element. A dynamically generated declarative display description is generated after the characteristics of the display device are known, using a program or an XML transform. The statically generated declarative display description has the disadvantage of repetition, whereas the dynamically generated declarative display description has the disadvantages of being less readable and more difficult to update, especially if the display logic is in a program.
Display description 1 illustrates an example HTML-like display description that defines the layout of a table user interface element differently depending on whether it is docked on the left or bottom of a display device. In this example, the specification of the content and attributes of the table needs to be repeated in order to accommodate the different layouts. FIG. 1 illustrates example renderings of this display description. Table 101 represents the table layout when it is docked on the left, and table 102 represents the table layout when it is docked to the bottom. As can be seen from the display description, the layout of the content of the table is specified by the ordering of the content in the display description and the placement of various tags. In particular, <TR> and <TD> define the layout of the content within the rows of the table. A developer would need to remove <TD> tags to change the layout of the content of the first row of table 101 from vertical to horizontal. Thus, the definition of the content and the specification of its layout are integrated and dependent on each other in the sense that the definition of the content would need to be modified (e.g., moved around) when the tags specifying the layout are modified. In addition, any change to the content of the table would need to be made in both repetitions of the table.
Display Description 1<if docked == left> <Table >  <TR>   <TD>    <Table>     <TR><TD>A1</TD></TR>     <TR><TD>A2</TD></TR>     <TR><TD>A3</TD></TR>    </Table>   </TD>  </TR>  <TR>   <TD>    <Table>     <TR><TD>B1</TD><TD>B2</TD><TD>B3</TD></TR>    </Table>   </TD>  </TR> </Table></if><if docked == bottom> <Table>  <TR>   <TD>    <Table>     <TR><TD>B1</TD><TD>B2</TD><TD>B3</TD></TR>    </Table>   </TD>   <TD>    <Table>     <TR><TD>A1</TD><TD>A2</TD></TR><TD>A3     </TD></TR>    </Table>   </TD>  </TR> </Table></if>
It would be desirable to have a technique for specifying variations in the layout of user interface elements that would reduce repetition and still be highly readable.